<template>
    <s-layout id="layout" :title="'收益列表'" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="'#ffffff'"
        :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx', fontWeight: '600' }">
        <view class="call_on list_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
            <view class="menu">
                <!-- <up-tabs :list="state.menulist" @click="menulistclick" :current="state.currentTab"></up-tabs> -->
                <fui-tabs :tabs="state.menulist" scroll @change="menulistclick"></fui-tabs>
            </view>
            <scroll-view scroll-y class="comprehensive" v-if="dailyYieldList.length" @scrolltolower='listScrolltolower'
                show-scrollbar="true" :refresher-enabled="isOpenRefresh" :refresher-triggered="triggered"
                :refresher-threshold="100" refresher-background="white" @refresherpulling="onPulling"
                @refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort"
                @scroll="onScroll">
                <view class="item_wrap">
                    <view class="item" v-for="(item, index) of dailyYieldList" :key="index"
                        @tap="lookDetails(item.id, item.state)">
                        <view class="item_left">
                            <view class="item_left_box">
                                <!-- 状态 -->
                                <view
                                    :class="item.state == 0 ? 'yellow' : item.state == 1 ? 'green' : item.state == 2 ? 'red' : 'status'"
                                    v-if="item.status !== 0">
                                    {{ item.state == 0 ? '未处理' : item.state == 1 ? '已处理' : item.state == 2 ? '已作废' : '' }}
                                </view>
                                <view class="title">{{ item.department.company.name }}/{{ item.department.name }}</view>
                            </view>
                            <view class="item_left_box">
                                <!-- <text class="name" >{{ item.classes_text }} : {{ item.date }} </text>  -->
                                <text class="name" v-if="item.start_date == item.end_date">{{ item.classes_text }} : {{
        item.start_date }}</text>
                                <text class="name" v-else>{{ item.classes_text }} : {{ item.start_date }} ~
                                    {{ item.end_date }}</text>
                            </view>
                            <view class="item_left_box">
                                <image class="time_name_img"
                                    :src="`${baseUrl}/uploads/uniapp_image/staff/Myinvite_icon_time.png`" />
                                <text class="time_name">{{ formatDatetime(item.createtime) }}</text>
                            </view>
                        </view>
                        <view class="item_right">
                            <text class="name">查看详情</text>
                            <u-icon size="10" name="arrow-right" color="#0038F7"></u-icon>
                        </view>
                    </view>
                </view>
                <!-- 正在加载组件 -->
                <view>
                    <s-loadmore-gather :current_page="current_page" :last_page="last_page"
                        ref="loadmoreRef"></s-loadmore-gather>
                </view>
            </scroll-view>
            <u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="暂无内容"
                marginTop="50%"></u-empty>
        </view>
        <!-- 底部提交按钮 -->
        <view>
            <s-button @netWork="newForm" :text="'新增日收益'"></s-button>
        </view>
    </s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { onLoad, onShow } from "@dcloudio/uni-app";
import { ref, reactive } from 'vue';
import { formatDatetime } from '@/utils/fn.js';
const { safeAreaInsets } = uni.getSystemInfoSync()
onLoad(() => {
    // const userStoreValue = uni.getStorageSync('user-store');
    // const userStoreObject = JSON.parse(userStoreValue)
    // group_id.value = userStoreObject.userInfo.group_id
    dailyYieldList.value = []
    dailyIndexData()
})
onShow(() => {

})
const state = reactive({
    // bgColor: '#fff',
    menulist: [
        { name: '未处理', value: '0', badge: 0 },
        { name: '已处理', value: '1' },
        { name: '已作废', value: '2' },
        { name: '全部', value: '' },
    ],
    currentTab: 0,
    // arrclass:['yellow','green','red','blue','gray','status']
})
// const group_id = ref('')
const loadmoreRef = ref()
//点击切换菜单  
const menulistclick = (item) => {
    dailyYieldList.value = [];
    page.value = 1
    state.currentTab = item.value;
    dailyIndexData()
}

// 日收益列表请求
const dailyYieldList = ref([])
const current_page = ref()
const last_page = ref()
const page = ref(1)
const dailyIndexData = async () => {
    let obj = {
        state: state.currentTab,
    };
    let params = {
        filter: JSON.stringify(obj),
        op: JSON.stringify({
            state: '=',
        }),
        // group_id: group_id.value,
        page: page.value,
    };
    const res = await sheep.$api.daily_yield.dailyIndexAPI(params)
    dailyYieldList.value = [...dailyYieldList.value, ...res?.data.rows]
    current_page.value = res.data.current_page
    last_page.value = res.data.last_page
    if(state.currentTab == '0') {
        state.menulist[0].badge = res.data.total
    }
}

//滚动触底
const listScrolltolower = () => {
    loadmoreRef.value.PopupScrolltolower()
    if (current_page.value < last_page.value) {
        page.value += 1;
    } else {
        return;
    }
    dailyIndexData();
};
// 新增日收益
const newForm = () => {
    sheep.$router.go('/subpackage/staff/workbench/daily_earnings/daily_earnings_add');
}
//查看日收益详情
const lookDetails = (id, state) => {
    sheep.$router.go('/subpackage/staff/workbench/daily_earnings/daily_earnings_details', {
        id: id,
        state: state
    })
}
// 页面下拉刷新
const freshing = ref(false)
const triggered = ref(false)
const isOpenRefresh = ref(true)  // 是否开启下拉
// 自定义下拉刷新控件被下拉
const onPulling = (e) => {
    if (e.detail.deltaY < 0) return  // 防止上滑页面也触发下拉
    triggered.value = true;
}
// 自定义下拉刷新被触发
const onRefresh = () => {
    if (freshing.value) return;
    freshing.value = true;
    setTimeout(() => {
        page.value = 1;
        dailyYieldList.value = []
        triggered.value = false;
        freshing.value = false;
        dailyIndexData();
    }, 500);
}
// 自定义下拉刷新被复位
const onRestore = () => {
    triggered.value = 'restore'; // 需要重置
    // console.log("onRestore");
}
// 自定义下拉刷新被中止
const onAbort = () => {
    // console.log("onAbort");
}
</script>

<style lang="scss" scoped>
@import '../compentns/publiclist.scss';

// tabs条
:deep(.menu.data-v-2b776ecc .u-tabs__wrapper__nav__item) {
    width: calc(25% - 44rpx);
}

// 滚动
.comprehensive {
    width: calc(100% - 40rpx);
    background-color: rgba(0, 0, 0, 0);
    margin: 0 20rpx;
    height: 73vh;
}

//列表
.call_on {
    width: 100%;
    height: 89vh;

    .list_box {
        width: 100%;
        height: auto;
    }
}

.loading-text {
    text-align: center;
    font-size: $uni-font-size-base;
    color: #666;
    padding: 20rpx 0 50rpx;
}

// 列表内容
.item_wrap {
    margin-top: 20rpx;

    .item {
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        background-color: #FFFFFF;
        box-shadow: 0 4rpx 8rpx 0 rgba(0, 0, 0, 0.05);
        display: flex;
        // justify-content: space-around;
        align-items: center;

        .item_left {
            width: 75%;
            padding: 25rpx 0 16rpx 30rpx;
            height: 168rpx;
            flex-direction: column;
            font-family: PingFangSC;
            color: $uni-text-color;

            .item_left_box {
                display: flex;

                .status {
                    width: 104rpx;
                    height: 36rpx;
                    font-family: PingFangSC;
                    color: $uni-color-primary;
                    font-weight: 500;
                    font-size: 22rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 18rpx;
                    margin-right: 10rpx;
                    background-color: rgba(0, 56, 247, 0.1);
                }

                .title {
                    font-weight: $uni-font-weight;
                    font-size: $uni-font-size-base;
                    margin-bottom: 10rpx;
                    width: 88%;
                    height: 50rpx;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                .name {
                    font-family: PingFangSC;
                    color: #666666;
                    font-weight: 400;
                   font-size:$uni-font-size-26;
                }

                .time_name_img {
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 10rpx;
                }

                .time_name {
                    font-family: PingFangSC;
                    color: #999999;
                    font-weight: 500;
                    font-size: $uni-font-size-sm;
                }

                &:last-child {
                    margin: 30rpx 0;
                    align-items: center;
                }
            }

            .name_and_phone {
                .name {
                    margin-right: 8rpx;
                }

                display: flex;
                align-items: center;
                color: #666666;
                font-weight: 400;
               font-size:$uni-font-size-26;
                margin-bottom: 20rpx;
            }

            .addresss {
                image {
                    width: 18rpx;
                    height: 26rpx;
                    margin-right: 8rpx;
                }

                display: flex;
                align-items: center;
                color: #999999;
                font-weight: 500;
                font-size: $uni-font-size-sm;
            }
        }

        .item_right {
            margin-top: 0;
            padding-right: 30rpx;
            font-family: PingFangSC;
            color: $uni-color-primary;
            font-weight: 400;
            font-size: 22rpx;
            display: flex;

            .name {
                margin-right: 6rpx;
            }
        }
    }
}

.menu {
    width: 100%;
    height: 98rpx;
    background: $uni-bg-color;

    :deep(.u-tabs__wrapper__nav__item) {
        width: 14%;
    }

    :deep(.u-tabs__wrapper__nav__line) {
        width: 30rpx !important;
        height: 8rpx !important;
        border-radius: 4rpx !important;
        background: linear-gradient(90deg, rgba(0, 56, 247, 1) 0%, rgba(77, 139, 255, 1) 100%) !important;
    }
}
</style>